<template>
  <div ref="dom" class="charts"></div>
</template>

<script>
import { on, off } from '@/libs/tool'
export default {
  name: 'Bing',
  props: {
    chartData: {
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dom: null,
      option: null
    }
  },
  watch: {
    chartData() {
      this.init()
    }
  },
  mounted() {
    // this.init()
    this.$nextTick(() => {
      this.init()
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  methods: {
    resize() {
      if (this.dom) {
        this.dom.resize()
      }
    },
    init() {
      const echarts = require('echarts')
      this.dom = echarts.init(this.$refs.dom)
      this.option = {
        legend: {
          top: 'bottom'
        },
        color: ['#3ac0b8', '#4cafe4', '#e25252', '#e4b840'],
        grid: {
          top: '0%',
          bottom: '10%',
          left: '0%',
          right: '0%',
          containLabel: true
        },
        series: [
          {
            name: '预警分析',
            type: 'pie',
            radius: [30, 60],
            center: ['50%', '40%'],
            roseType: 'area',
            data: this.chartData
          }
        ]
      }

      this.option && this.dom.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped>
.charts {
  width: 100%;
  height: 400px;
}
</style>
